<template>
	<vCommonPage class="jzbw" :type="1" title="智能导诊">
		<div slot="customContent" style="width: 100%;height: 100%;" >
			<div class="topTitle">
				请选择您的就诊部位
			</div>
			<div class="topTitleSec">
				智能导诊将根据您的选择，推荐符合您病症的科室
			</div>
			<div class="center">
				<div class="bwBox" v-if="$route.query.sex == 2 && zfListIndex ==0">
					<img class="bwImg" src="../../assets/images/zndz/womanBwZ.png" />
				</div>
				<div class="bwBox" v-if="$route.query.sex == 2 && zfListIndex ==1">
					<img class="bwImg" src="../../assets/images/zndz/womanBwF.png" />
				</div>
				<div class="bwBox" v-if="$route.query.sex == 1 && zfListIndex ==0">
					<img class="bwImg" src="../../assets/images/zndz/manBwZ.png" />
				</div>
				<div class="bwBox" v-if="$route.query.sex == 1 && zfListIndex ==1">
					<img class="bwImg" src="../../assets/images/zndz/manBwF.png" />
				</div>
			</div>
			<!-- 正面 -->
			<el-button v-if="zfListIndex ==0" v-for="(item,index) in bwListPositive"
				:class="item.isClick?'click border_none bwButton_'+index:'border_none bwButton_'+index" @click="clickBtn(item,index)">
				{{item.menuText}}
			</el-button>
			<!-- 背面 -->
			<el-button v-if="zfListIndex ==1" v-for="(item,index) in bwListOtherSide"
				:class="item.isClick?'click border_none bwButton_f'+index:'border_none bwButton_f'+index" @click="clickBtn(item,index)">
				{{item.menuText}}
			</el-button>
			<!-- 正反点击按钮 -->
<!-- 			<el-button v-for="(item,index) in zfList"
				:class="zfListIndex == index?'zfClick zDiv_'+index : 'zDiv_'+index" @click="clickZf(item,index)">
				{{item.name}}
			</el-button> -->

			<div class="bottomBox">
				<el-button  type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		getSysGuideMenu
	} from "@api/apiBox/zndz"
	export default {
		name: "jzbw",
		data() {
			return {
				//正面
				bwListPositive: [],
				//反面
				bwListOtherSide: [],
				zfList: [{
						name: '正',
						isClick: false
					},
					{
						name: '反',
						isClick: false
					}
				],
				zfListIndex: 0
			};

		},
		methods: {
			//this.zfListIndex 0正面 1 反面
			clickBtn(item, index) {
				for (let item of this.bwListPositive) {
					item.isClick = false;
				}
				item.sex = this.$route.query.sex;
				this.$store.dispatch("zndz/updateBwInfo", item); //存储部位选择信息
				this.bwListPositive[index].isClick = true;
				setTimeout(()=>{
					this.$router.push({
						name: 'xzjtjzbw',
						sex: this.$route.query.sex
					})
				},100)
			},
			clickZf(item, index) {
				for (let item of this.zfList) {
					item.isClick = false;
				}
				item.sex = this.$route.query.sex;
				this.$store.dispatch("zndz/updateBwInfo", item); //存储部位选择信息
				this.zfList[index].isClick = true;
				this.zfListIndex = index;
			},
			async initData() {
				//添加正面数组
				let data = {
					data: {
						sex: 1, //1男 2 女
						frontBack: 1 //1正面 2反面
					},
					that: this
				};
				const res = await getSysGuideMenu(data);
				let forntData = res.data;
				let list = [];
				for (let item of forntData) {
					item.isClick = false;
					list.push(item)
				}
				console.log(list)
				this.bwListPositive = list;

				//添加反面数组
				let disForntData = {
					data: {
						sex: 1, //1男 2 女
						frontBack: 2 //1正面 2反面
					},
					that: this
				};
				const disFontRes = await getSysGuideMenu(disForntData);
				let fList = [];
				let dsiForntData = disFontRes.data;
				for (let item of dsiForntData) {
					item.isClick = false;
					fList.push(item)
				}
				this.bwListOtherSide = fList;
			}
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {
			this.initData();
		}
	};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
	@import "../../assets/css/zndz/jzbw.scss";
</style>
<style>
	.zndz .el-button+.el-button {
		margin-left: 0px;
	}
	
	@media (min-height: 1919px)
	{
		.jzbw .el-row-vertical{
			height: calc(100% - 208px);
		}
	}


	@media  (min-height: 0px) and (max-height: 1910px) {
		.jzbw .el-row-vertical{
			height: calc(100% - 228px);
		}
	}	
</style>
